<template>
  <div class="about" v-cloak>
    <div v-if="flag">flag为真显示</div>
    <div v-if="!flag">flag假显示</div>

    <div v-if="age < 18">未成年</div>
    <div v-else-if="age == 18">刚好成年</div>
    <div v-else>成年</div>
    <div v-show="flag">为真显示</div>
    <hr />
    <!-- v-model 双向绑定指定 -->
    <input type="text" v-model="usename" />
    <textarea v-model="password"></textarea>
    <input type="checkbox" v-model="flag" />
    <select v-model="sel">
      <option value="1">黑龙江</option>
      <option value="2">河北</option>
      <option value="3">广东</option>
    </select>
    <button @click="say">点击</button>
    <!-- v-bind 简写 :
    自定义属性 和 自带属性等的数据绑定 -->
    <div :class="active" :dir="dirName">
      大哥大姐行行好 诺 嗻 收到
    </div>
    <div :class="[active, ak]">的的</div>
    <div :class="flag ? active : ak">撒大声地</div>
    <div :class="flag ? 'ac' : 'ak'">爱的发的发</div>
    <!-- <img :src="dg" />
    <a :href="sadf"></a> -->
    <div :ccc="true" :visble="123">大法师</div>
    <!-- v-on 简写 @  绑定事件-->
    <button @click="run">事件</button>
    <!-- v-for循环 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <span>姓名：{{ item.name }}</span
        >---- <span>年龄 :{{ item.age }}</span>
        <div v-for="(Hitem, ind) in item.hobby" :key="ind">
          <h1>游戏：{{ Hitem.game }}----运动：{{ Hitem.sport }}</h1>
        </div>
      </li>
    </ul>
    <!-- v-for循环对象 -->
    <h1 v-for="(val, key, index) in car" :key="key">
      {{ index }}---{{ key }}---{{ val }}
    </h1>
    <!-- v-for 固定次数循环 item 从1开始 -->
    <h1 v-for="item in 10" :key="item">第{{ item }}级</h1>
    <!-- v-html 渲染html元素 -->
    <div v-html="myhtml"></div>
    <!-- v-text 渲染文本 -->
    <div v-text="myhtml"></div>
    <!-- v-once 只渲染一次 不会发生从新渲染-->
    <h2 v-once>{{ msg }}</h2>
    <!-- v-cloak 隐藏未编译好的模板 组件和标签内容 -->
    <!-- v-pre  原样输出 编译-->
    <h1 v-pre>{{你好，美丽}}</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '你好',
      flag: true,
      age: 17,
      usename: '',
      password: '',
      ck: '',
      sel: '',
      active: 'ac',
      ak: 'ak',
      dirName: '你好',
      car: {
        name: '兰博基尼',
        price: '500',
        color: 'blue'
      },
      myhtml: '<h1 style="color:red;">今天星期一</h1>',
      arr: [
        {
          name: '张三',
          age: 18,
          hobby: [
            { game: '王者', sport: '篮球' },
            { game: 'lol', sport: '足球' }
          ]
        },
        {
          name: '社会王',
          age: 20,
          hobby: [
            { game: 'dnf', sport: '排球' },
            { game: 'cf', sport: '桌球' }
          ]
        },
        {
          name: '金燕龙',
          age: 30,
          hobby: [
            { game: 'dff', sport: '球' },
            { game: 'fd', sport: '橄榄球' }
          ]
        }
      ]
    }
  },
  methods: {
    run (row, page) {
      console.log(9899898)
    },
    say () {
      this.usename = '马云'
      console.log(this.password)
      console.log(this.sel)
    }
  }
}
</script>
<style lang="less">
[v-cloak] {
  display: none;
}
.ac {
  background: silver;
}
.ak {
  color: red;
}
</style>
